<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="box">
    <!-- 动态绑定 a 标签以及动态绑定 src 是以后开发中每个项目肯定会有的场景 -->
    <a v-bind:href="info.url">百度一下，你就知道</a>
    
    <!-- <img v-bind:src="info.imgUrl" alt=""> -->

    <!-- 如果在项目中频繁的使用 v-bind ，代码会很冗余 -->
    <!-- 所以 Vue 给 v-bind 提供了简写方式，就是一个冒号 : -->
    <!-- 冒号是 v-bind 的简写，Vue 给部分指令提供了简写方式 -->
    <img :src="info.imgUrl" alt="">
  </div>

  <script src="../vue.js"></script>
  <script>
    new Vue({
      el: '#box',
      data: {
        info: {
          url: 'https://www.baidu.com',
          imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw%2F3eca2a81-5e84-4d33-9616-bfa38ae0a33f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677640713&t=4127def2f031fba56a82f163d90d3878'
        }
      }
    })
  </script>
</body>

</html>
